<template>
  <div>
    <div class="user-cell">
      <div class="flex-y">
        <img class="avatar" :src="memberData.img"/>
      </div>
      <div class="flex-y">
        <span class="userName" v-text="memberData.nick"></span>
        <br/>
        <span class="grade">我的{{memberData.des}}</span>
        <span class="userLevel" v-text="memberData.rank.levelCh"></span>
      </div>
    </div>
    <div class="space"></div>
    <div style="margin-top: 30vw"> <!--距顶边距-->
      <div  v-for="(item, index) in orderList" :key="index">
        <div class="orderlist">
          <div class="order-cell">
            <div class="flex-r">
              <div class="flex-y">
                <img class="product" :src="item.list[0].pic"/>
              </div>
              <div class="infpo">
                <span class="goodname" v-text="item.list[0].name"></span>
                <br/>
                <span class="price">
                共<span>{{item.num}}</span>件，
                合计<span style="color: #BC7347">{{item.price}}</span>元
                <span v-if="parseInt(item.express) > 0">（运费{{item.express}}元）</span>
                <span v-if="parseInt(item.express) === 0">（免运费）</span>
                </span>
              </div>
            </div>
            <div @click="handleClick(item)">
              <svg class="icon-right" aria-hidden="true">
                <use xlink:href="#icon-qb_gd"></use>
              </svg>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'memberOrder',
  data() {
    return {
      memberData: JSON.parse(this.$route.query.res),
      pages: 0,
      size: 10,
      orderList: [],
      goodsList: []
    };
  },
  created() {
    // console.log('menbere oorder>>>>>>>>>>>>>>>>>>', this.memberData);
    let typeId = this.memberData.uid;
    let query = {
      typeId: typeId,
      pages: this.pages,
      size: this.size
    };
    this.$UserReq.getMemberOrderList(query).then(res => {
      // 存放数据不同步
      for (let i in res.data) {
        res.data[i].num = 0;
        for (let j in res.data[i].list) {
          res.data[i].num += parseInt(res.data[i].list[j].num);
          res.data[i].targetType = 'order';
        }
      }
      this.orderList = this.orderList.concat(res.data);
      console.log('getMemberOrderList:', res, res.data, this.orderList, this.goodsList);
      this.pages++;
      this.loading = false;
      this.load = false;
      // 没有数据了
      let DataNum = res.data.length;
      if (DataNum === 0) {
        this.LoadData = false;
        this.LastData = true;
        return;
      }
      //  打开查询数据接口
      this.LoadData = true;
    }, () => {
      this.loading = false;
    });
  },
  methods: {
    handleClick(item) {
      // alert(item);
      if (item.targetType === 'order') {
        this.$router.push({
          name: 'orderDetail',
          query: {id: item.id}
        });
      }
    }
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl"
  .flex-r
    flex-x()

  .flex-c
    flex-y()

  .center
    flex-center()

  .divider
    divider()

  .space
    space()
  .user-cell
    margin-left vw(15)
    margin-top vw(15)
    width vw(345)
    height vw(90)
    border-radius vw(5)
    background-color white
    flex-x()
    z-index 1000
    position fixed

  .avatar
    box-sizing border-box
    width vw(50)
    height vw(50)
    padding 3px
    border-radius(9vw)
    margin-left vw(20)
    /*margin-top vw(19)*/

  .userName
    margin-left -52vw
    margin-top vw(-20)
    word-vw(14, first-ash)
    line-height vw(19)
    height vw(19)
    text-align left

  .grade
    margin-left -52vw
    margin-top vw(18)
    word-vw(14, second-ash)
    line-height vw(28)
    height vw(22)
    text-align left

  .userLevel
    word-vw(14, main-color)
    margin-left vw(47)
  .orderlist
    position relative
    margin-left vw(15)
    margin-top vw(15)
    width vw(345)
    height vw(90)
    border-radius vw(5)
    background-color white
    flex-x()
  .infpo
    position absolute
    margin-left vw(80)

  .goodname
    margin-top vw(18)
    word-vw(14, first-ash)
    line-height vw(28)
    height vw(22)
    text-align left
  .product
    box-sizing border-box
    width vw(60)
    height vw(60)
    margin vw(10)
  .price
    margin-top vw(18)
    word-vw(12, second-ash)
    line-height vw(28)
    height vw(22)
    text-align left

  .icon-right{
    width vw(11)
    height vw(11)
    overflow: hidden
    margin-left: vw(315)
    margin-top: vw(-48)
    fill #c8c8c8
  }
</style>
